<template>
  <div class="detail-container">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <!-- 1. 先去后端接口那里找prop 字段 -->
      <el-form-item label="姓名" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="工号">
        <el-input v-model="form.workNumber" :disabled="isEdit" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="form.mobile" :disabled="isEdit" />
      </el-form-item>
      <el-form-item label="部门" prop="departmentId">
        <!-- 级联选择器 -->
        <!-- <SelectTree :value="ruleForm.departmentId" @xxxx = "xxx" /> -->
        <SelectTree v-model="form.departmentId" />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select v-model="form.formOfEmployment" placeholder="请选择聘用形式" style="width:100%">
          <el-option label="正式" :value="1" />
          <el-option label="非正式" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker v-model="form.timeOfEntry" format="yyyy年M月dd日" value-format="yyyy-MM-dd" type="date" placeholder="选择入职时间" style="width:100%" />
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker v-model="form.correctionTime" format="yyyy年M月dd日" value-format="yyyy-MM-dd" type="date" placeholder="选择转正时间" style="width:100%" />
      </el-form-item>
      <el-form-item label="员工头像">
        <!-- 员工头像，要上传的，等下写 -->
        <import-update :img.sync="form.staffPhoto" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">{{ isEdit ? '编辑' : '新增' }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { addEmployeeRequest, getEmployeeInfoByIdRequest, updateEmployeeInfoByIdRequest } from '@/api/employee'
import SelectTree from './components/select-tree.vue'
import ImportUpdate from './components/imageUpdate.vue'
export default {
  name: 'DetailCom',
  components: {
    SelectTree,
    ImportUpdate
  },
  data() {
    // js里面定义变量, 只有两个符号可以开头 _$
    // 函数的形参, 和变量定义是一样的, 要符合变量名称规则
    const valideCorrectionTime = (_, value, callback) => {
      // 我们要比较的是 入职时间 和 转正时间的对比, 所以先打印出来看看
      console.log(value, this.form.timeOfEntry)
      if (new Date(value).getTime() <= new Date(this.form.timeOfEntry).getTime()) {
        callback(new Error('转正时间要大于入职时间'))
        return
      }
      callback()
    }
    return {
      form: {
        username: '',
        mobile: '',
        workNumber: '',
        departmentId: null,
        formOfEmployment: null,
        timeOfEntry: '',
        correctionTime: '',
        staffPhoto: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' },
          { min: 1, max: 4, message: '姓名只能输入1-4个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' },
          { pattern: /^1[356789][0-9]{9}$/, message: '手机格式不对', trigger: 'blur' }
        ],
        departmentId: [
          { required: true, message: '请选择一个部门', trigger: 'blur' }
        ],
        formOfEmployment: [
          { required: true, message: '请选择一个聘用形式', trigger: 'blur' }
        ],
        timeOfEntry: [
          { required: true, message: '请选择入职时间', trigger: 'blur' }
        ],
        correctionTime: [
          { required: true, message: '请选择转正时间', trigger: 'blur' },
          { validator: valideCorrectionTime, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    isEdit() {
      if (this.$route.params.id) {
        return true
      }
      return false
    }
  },
  created() {
    // console.log(2222222, this.$route.params)
    // params是动态路由的参数
    // query 是url ?问号后面跟的参数
    if (this.$route.params.id) {
      // 有id就一定是编辑，否则就是新增，就不发请求
      this.getEmployeeInfoById()
    }
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate(async(valid) => {
        // 如果表单所有字段都校验成功，valid就是true  否则就是false
        if (valid) {
          if (this.isEdit) {
            // 编辑请求
            await updateEmployeeInfoByIdRequest(this.form)
          } else {
            // 新增请求
            await addEmployeeRequest(this.form)
          }
          this.$router.push('/employee')
        }
      })
    },
    async getEmployeeInfoById() {
      const res = await getEmployeeInfoByIdRequest(this.$route.params.id)
      this.form = res.data
    }
  }
}
</script>
<style lang='scss'  scoped>
.detail-container {
  padding: 20px;
  .el-form {
  width: 500px;
}
}

</style>
